<template>

  <div>
    <a-modal :width="600" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        {{ title }}
      </template>

      <a-form auto-label-width="true" labelAlign="right" :model="userDto">

        <a-form-item label="用户名称">
          <a-input v-model="userDto.userName" placeholder="请输入用户名称"/>
        </a-form-item>

        <a-form-item label="用户信息">
          <a-textarea v-model="userDto.userInfo" placeholder="请输入用户信息"/>
        </a-form-item>

        <a-form-item label="用户职位">
          <a-input v-model="userDto.userJob" placeholder="请输入用户职位"/>
        </a-form-item>

        <a-form-item style="width: 200px" @click="selectImg" label="用户头像">

          <a-image
              height="120"
              width="120"
              :src="src"
              :preview="false"

          />

        </a-form-item>


        <a-form-item style="width: 300px" label="状态">
          <a-select v-model="userDto.status" placeholder="状态" allow-clear>
            <a-option :value="1">启用</a-option>
            <a-option :value="0">禁用</a-option>
          </a-select>
        </a-form-item>

      </a-form>

    </a-modal>
  </div>


</template>

<script setup lang="ts">

//@ts-ignore
import type {Ref} from "vue-demi";
import ImageCompressor from "image-compressor.js";
import {ref} from "vue";
import type {UserDto} from "@/apis/sample/user";
import {addUser, updateUser, updateUserImg} from "@/apis/sample/user";
import {Notification} from "@arco-design/web-vue";



const file = ref(null)




/**
 * 使用index中的值进行双向绑定
 * */
const visible:Ref<Boolean> = defineModel("vis", {
  type:Boolean
  ,default:false
})

const src:Ref<string> = defineModel("src",{
  type:String
  ,default:''
})

const userDto:Ref<UserDto> = defineModel("dto", {
  type:Object
  ,default:{
    id:0,
    userName:'',
    userInfo:'',
    userImg:'',
    userJob:'',
    uploader:'',
    updateTime:'',
    status:null,
  }})

/**
 * 表单标题
 * */

const title:Ref<String> = defineModel("tit", {type:String,default:""})

const api:Ref<String> = defineModel('api',{type:String,default:""})


/**
 * 选择图片方法
 * */
const selectImg = () => {
  let input =  document.createElement("input")

  input.type = "file"
  input.accept = "*/image"
  input.click()

  input.onchange =  (e) => {

    //@ts-ignore
    file.value = e.target?.files[0]

    let fileReader = new FileReader();

    //@ts-ignore
    fileReader.readAsDataURL(e.target?.files[0])

    fileReader.onload = function (e) {
      if (e.target == null){
        return
      }
      src.value = e.target.result as string
    }

    let img = new ImageCompressor()

    if (file.value != null) {


      img.compress(file.value, {
        quality: 0.6
      }).then(res => {
        //@ts-ignore
        file.value = res
      })


    }
  }
}

/**
 * 确定按钮点击事件
 * */
const handleOk = async () => {
  visible.value = !visible.value



  if (api.value == 'add'){

    let formData = new FormData()

    if (file.value != null){
      formData.append("userImg", file.value)
    }else {
      formData.append("userImg",new Blob)
    }

    formData.append('userName',userDto.value.userName)
    formData.append('userInfo',userDto.value.userInfo)
    formData.append('userJob',userDto.value.userJob)
    formData.append('status',userDto.value.status)
    formData.append('uploader',userDto.value.uploader)

    addUser(formData).then( res =>{

      Notification.success({
        title: "添加成功",
        content: "添加成功",
        duration: 2000
      })
      emit('ok')
      src.value = ''

    })
    //清空表单
    clear()

  }

  if (api.value == 'up'){

    let formData1 = new FormData;

    formData1.append('userId',userDto.value.id)
    formData1.append('uploader',userDto.value.uploader)


      updateUser(userDto.value).then(res =>{

      if (file.value != null){
        formData1.append("userImg", file.value)
        updateUserImg(formData1).then(res =>{
          Notification.success({
            title: "修改成功",
            content: "修改成功",
            duration: 2000
          })
          emit('ok')
          src.value = ''
        })

      }else {
        Notification.success({
          title: "修改成功",
          content: "修改成功",
          duration: 2000
        })
        emit('ok')
        src.value = ''
      }
      })

    //清空表单
    clear()

  }


}

/**
 * 取消按钮
 * */
const handleCancel = () => {


  visible.value =!visible.value
  file.value = null
  clear()
}




/**
 * 父组件更新列表方法
 * */
const emit = defineEmits(["ok"])


/**
 * 清空
 * */
const clear = ()=>{

  userDto.value.id = 0
  userDto.value.userName = ''
  userDto.value.userImg = ''
  userDto.value.userJob = ''
  userDto.value.userInfo = ''
  userDto.value.status = null
  userDto.value.updateTime = ''
  userDto.value.uploader = ''


}
</script>

<style lang="scss" scoped>

</style>